<template>
    <section>
        <div class="cate-container">
            <div class="header flex-box">
                <el-button @click="back">返回</el-button>
            </div>

            <div class="cate-info">
                <el-form ref="form" :model="form" :rules="rules" label-width="140px">
                    <el-form-item label="排序" prop="sort">
                        <el-input v-model.number="form.sort" placeholder="请输入排序"></el-input>
                    </el-form-item>
                    <el-form-item label="标识" prop="shop_id">
                        <el-input v-model.number="form.shop_id" placeholder="请输入标识"></el-input>
                    </el-form-item>
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item label="图片" prop="image">
                        <upload ref="uploadimage" :image.sync="form.image"></upload>
                    </el-form-item>
                    <el-form-item label="是否在列表中显示" prop="is_in_list" placeholder="请选择">
                        <el-switch
                                v-model="form.is_in_list"
                                active-color="#13ce66"
                                inactive-color="#999999">
                        </el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('form')">保存</el-button>
                        <el-button @click="resetForm('form')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </section>

</template>

<script>
    import Upload from '../../components/basic/UploadImage/Upload.vue'

    export default {
        components: {
            Upload
        },
        data() {
            return {
                id:'',
                dialogImageUrl: '',
                dialogVisible: false,
                fileList: [],
                tableLoading: false,
                categoryList: [],
                form: {
                    sort: '',
                    shop_id: '',
                    name: '',
                    image: '',
                    is_in_list: ''
                },
                rules: {
                    sort: [{required: true, message: '请输入排序', trigger: 'blur'},{type:'number', message: '排序必须为数字'}],
                    shop_id: [{required: true, message: '请输入标识', trigger: 'blur'},{type:'number', message: '标识必须为数字'}],
                    name: [{required: true, message: '请输入名称', trigger: 'blur'}],
                    image: [{required: true, message: '请选择图片'}],
                    is_in_list: [{required: true, message: '请选择列表显示方式'}],
                }
            }
        },
        computed: {},
        created() {
            this.id = this.$route.query.id;
            this.getCategoryList(parseInt(this.$route.query.id));
        },
        mounted() {

        },
        methods: {
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.clearList = Math.random();
            },
            back() {
                this.$router.go(-1);
            },
            getCategoryList(id) {
                axios
                    .get(`admin_categories/${id}`)
                    .then(res => res.data.data)
                    .then(res => ({
                        sort: res.sort,
                        shop_id: res.shop_id,
                        name: res.name,
                        image: res.image,
                        is_in_list: res.is_in_list === 1 ? true : false
                    }))
                    .then(res => {
                        console.log('编辑', res);
                        this.form = res;
                        this.tableLoading = false;
                    })
            },
            onSubmit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.$confirm('是否确认修改分类?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        })
                            .then(() => this.postData())
                            .then(() => {
                                this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                });
                            })
                            .catch(err => {
                                if (err !== 'cancel') {
                                    this.$message({
                                        type: 'error',
                                        message: `修改失败 ${err}`
                                    });
                                }
                            });
                    } else {
                        return false;
                    }
                });
            },
            genData(data) {
                console.log(
                    {
                        sort: data.sort,
                        shop_id: data.shop_id,
                        image: data.image,
                        is_in_list: data.is_in_list === true ? 1 : 0 ,
                        name: data.name
                    }
                );
                return {
                    sort: data.sort,
                    shop_id: data.shop_id,
                    image: data.image,
                    is_in_list: data.is_in_list === true ? 1 : 0 ,
                    name: data.name,
                    _method: 'PUT'
                };
            },
            postData() {
                return axios
                    .post(`admin_categories/${this.id}`, this.genData(this.form))
                    .then(res => {
                        return res.data.status === 1 ? Promise.resolve() : Promise.reject(res.data.msg);
                    });
            },
            uploadSuccess(response, file, fileList) {
                console.log('图片上传', file)
                // if (response.status === 1) {
                this.form.image.push(file.url)
                console.log('上传图片', this.form.image)
                // } else {
                //     this.$message.error('上传图片错误');
                // }
            },
            handleRemove(index) {
                console.log('移除图片', index)
                this.form.image.splice(index, 1);
            },
        }
    }
</script>
<style scoped>
    .cate-container {
        margin: 25px;
        border-radius: 4px;
        background: #fff;
        min-height: calc(100vh - 92px);
    }

    .flex-box {
        display: flex;
    }

    .header {
        padding: 10px;

        border-bottom: 1px solid #d8d8d8;
    }

    .cate-info {
        padding: 20px;
    }

    .imageList img {
        position: relative;
        width: 180px;
        height: 180px;
        margin-right: 20px;
        border-radius: 20px;
    }

    .flex-img__item {
        position: relative;

        box-sizing: border-box;
        width: 148px;
        height: 148px;
        margin: 0 8px 8px 0;

        border: 1px solid #c0ccda;
        border-radius: 6px;
        background-color: #fff;
    }

    .right-up {
        position: absolute;
        z-index: 1024;
        top: -5px;
        right: -5px;
    }

    .flex-img__image {
        width: 148px;
        height: 148px;

        border-radius: 6px;
    }
    .selected_true{
      color:red
    }
    .selected_false{
        color:blue
    }
</style>